<template>
  <div class="i-table-no-border">
    <div>
      <table-btns
        :tableTopOperateData="listData.tableTopOperate"
        :tableTopBatchOperate="listData.tableTopBatchOperate"
        :selectedData="selectedData"
        :requestApi="listData.requestApi"
        :basePath="basePath"
        @exportData="exportData"
        @actionsChange="getData"
      >
      </table-btns>
    </div>
    <!-- 表格内容 start  -->
    <Table
      ref="table"
      :columns="columns"
      :data="tableDataList"
      :loading="loading"
      class="ivu-mt"
      stripe
      @on-filter-change="handleFilterChange"
      @on-select="handleSelect"
      @on-select-cancel="handleSelectCancel"
      @on-select-all="handleSelectAll"
      @on-select-all-cancel="handleSelectAllCancel"
    >
      <template slot-scope="{ row }" slot="issueState">
        <span v-if="row.issueState == 1">是</span>
        <span v-if="row.issueState == 2">否</span>
      </template>
      <template slot-scope="{ row }" slot="issueState">
        <span v-if="row.issueState == 1">是</span>
        <span v-if="row.issueState == 2">否</span>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <!-- <table-actions :requestApi="listData.requestApi" :basePath="basePath" :rowData="row" :indexData="index"
                    @actionsChange="getData"></table-actions> -->
        <Button v-if="showBtn('设置资质')" @click="setSupply(row)"
          >设置资质</Button
        >
      </template>
    </Table>
    <!-- 表格内容 end  -->
    <!-- 分页 start  -->
    <div class="ivu-mt ivu-text-center">
      <Page
        :total="totalNum"
        show-total
        show-sizer
        transfer
        :current.sync="nowPage"
        @on-change="getData"
        @on-page-size-change="handleChangePage"
      />
    </div>
    <Modal
      v-model="modal1"
      title="关联资质"
      width="1000"
      @on-ok=""
      @on-cancel=""
    >
      <Row type="flex">
        <Col span="8"
          >资质名称：
          <Input
            v-model="qualificationName"
            placeholder="请输入内容"
            style="width: 200px"
          />
        </Col>
        <Col span="8"
          >供应商名称：
          <Input
            v-model="supplyName"
            placeholder="请输入内容"
            style="width: 200px"
          />
        </Col>
        <Col span="8">
          <Button type="primary" @click="searchBt">查询</Button>
          <Button style="margin-left: 8px" @click="resetBt">清空</Button>
        </Col>
      </Row>
      <Tabs value="name1" @on-click="Chang">
        <TabPane label="已关联" name="name1">
          <Table border :columns="columns12" :data="data6">
            <template slot-scope="{ row }" slot="qualificationCate">
              <span v-if="row.qualificationCate == 1">检验报告</span>
              <span v-if="row.qualificationCate == 2">材质单</span>
              <span v-if="row.qualificationCate == 3">合格证</span>
              <span v-if="row.qualificationCate == 4">3C认证</span>
            </template>
            <template slot-scope="{ row, index }" slot="action">
              <Button type="info" size="small" @click="cancelBtFun(row)"
                >取消</Button
              >
            </template>
          </Table>
          <div class="ivu-mt ivu-text-center">
            <Page
              :total="totalNum1"
              show-total
              show-sizer
              :current.sync="nowPage1"
              @on-change="getRelByCondition"
              @on-page-size-change="handleChangePage"
            />
          </div>
        </TabPane>
        <TabPane label="未关联" name="name2">
          <Table border :columns="columns12" :data="data6">
            <template slot-scope="{ row }" slot="qualificationCate">
              <span v-if="row.qualificationCate == 1">检验报告</span>
              <span v-if="row.qualificationCate == 2">材质单</span>
              <span v-if="row.qualificationCate == 3">合格证</span>
              <span v-if="row.qualificationCate == 4">3C认证</span>
            </template>
            <template slot-scope="{ row, index }" slot="action">
              <Button type="primary" size="small" @click="relationBtFun(row)"
                >关联</Button
              >
            </template>
          </Table>
          <div class="ivu-mt ivu-text-center">
            <Page
              :total="totalNum1"
              show-total
              show-sizer
              transfer
              :current.sync="nowPage1"
              @on-change="getNotRelByCondition"
              @on-page-size-change="handleChangePage"
            />
          </div>
        </TabPane>
      </Tabs>
    </Modal>
    <!-- 分页 end  -->
  </div>
</template>
<script>
import { mapState, mapMutations, mapGetters } from 'vuex';
import util from '@/libs/util';
import { ApiRequest } from '@api/basePage';
import tables from '@/mixins/dynamictable'; // 混入通用代码
import qwInput from '@/components/common/formItem/qwInput'; // 表单input组件
import qwSelect from '@/components/common/formItem/qwSelect'; // 表单select组件
import qwDatePicker from '@/components/common/formItem/qwDatePicker'; // 表单日期组件
import qwSelectTree from '@/components/common/formItem/qwSelectTree'; // 表单下拉树组件
import tableActions from './tableActions'; // 表格操作项
import tableBtns from './tableBtns'; // 表格内部操作按钮
import { getBtnsId } from '@/libs/btnsPermission';
export default {
  mixins: [tables],
  props: {
    dynamicData: {
      type: Object
    },
    pagePath: {
      type: String
    },
    orderState: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapState('admin/baseList', [
      'listData',
      'searchFormData',
      'searchFormDataQ'
    ]),
    ...mapGetters('permissions/systemBtns', ['showBtn'])
  },
  watch: {
    orderState (n, o) {
      this.getData();
    }
  },
  components: {
    qwInput,
    qwSelect,
    qwDatePicker,
    qwSelectTree,
    tableActions,
    tableBtns
  },
  data () {
    return {
      qualificationCate: '',
      selectValue: 'name1',
      modal1: false,
      util: util,
      basePath: this.dynamicData.basePath, // 拼接基础路径
      columns12: [
        {
          title: '资质名称',
          key: 'qualificationName'
        },
        {
          title: '供应商名称',
          key: 'supplyName'
        },
        {
          title: '资质类型',
          slot: 'qualificationCate'
        },
        {
          title: '描述',
          key: 'note'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      data6: [],
      qualificationName: '',
      supplyName: '',
      totalNum1: 0,
      nowPage1: 1,
      relUuid: ''
    };
  },
  created () {},
  methods: {
    ...mapMutations('admin/baseList', ['setTableRowData']),
    // 获取表格的数据
    getData () {
      let searchParam = [];
      Object.keys(this.searchFormData).forEach((key) => {
        searchParam.push({
          name: key,
          value: this.searchFormData[key]
        });
      });
      Object.keys(this.searchFormDataQ).forEach((key) => {
        searchParam.push({
          name: key,
          value: this.searchFormDataQ[key]
        });
      });

      let data = {
        nowPage: this.nowPage,
        pageShow: this.pageShow,
        searchParam: JSON.stringify(searchParam),
        sortName: '',
        sortType: ''
      };

      // 增加表格操作项
      this.loading = true;
      // 开始请求列表
      ApiRequest(
        this.listData.requestApi.getTableList.url,
        this.listData.requestApi.getTableList.type,
        data
      ).then((res) => {
        let rData = res;
        if (rData.retData !== '') {
          rData.retData = rData.retData;
        }
        this.tableDataList = [];
        this.totalNum = rData.retData.totalNum;
        rData.retData.results.forEach((item) => {
          let qualificationCateMap = {
            1: '检验报告',
            2: '材质单',
            3: '合格证',
            4: '3C认证'
          };
          item.qualificationCateStr = '未知';
          if (item.qualificationCate) {
            item.qualificationCateStr =
              qualificationCateMap[item.qualificationCate];
          }
          let actions = [];
          actions.push({
            name: 'prop',
            label: '设置资质',
            handleType: 'prop'
          });
          item.actions = actions;
        });
        // 增加表格操作项
        this.tableDataList = rData.retData.results;
        this.totalNum = rData.retData.totalNum;
        this.loading = false;
      });
    },
    Chang (a) {
      this.selectValue = a;
      this.qualificationName = '';
      this.supplyName = '';
      if (a === 'name1') {
        this.getRelByCondition();
      } else {
        this.getNotRelByCondition();
      }
    },
    // 关联
    relationBtFun (row) {
      let data = {
        qualificationUuids: row.uuid,
        // qualificationUuids: this.checkData.join(','),
        relUuid: this.relUuid
      };
      ApiRequest(
        this.listData.requestApi.createRelate.url,
        this.listData.requestApi.createRelate.type,
        data,
        true
      ).then((res) => {
        if (res.retStatus === '1') {
          this.$Message.success('关联成功');
          this.getNotRelByCondition();
        }
      });
    },
    // 取消关联
    cancelBtFun (row) {
      let data = {
        qualificationUuids: row.uuid,
        // qualificationUuids: this.checkData.join(','),
        relUuid: this.relUuid
      };
      ApiRequest(
        this.listData.requestApi.deleteRelate.url,
        this.listData.requestApi.deleteRelate.type,
        data,
        true
      ).then((res) => {
        if (res.retStatus === '1') {
          this.$Message.success('取消成功');
          this.getRelByCondition();
        }
      });
    },
    setSupply (row) {
      let curBtnId = getBtnsId('设置资质');
      sessionStorage.setItem('buttonId', curBtnId);
      this.qualificationName = '';
      this.supplyName = '';
      this.modal1 = true;
      this.relUuid = row.uuid;
      this.qualificationCate = row.qualificationTypeNo;
      this.getRelByCondition();
    },
    searchBt () {
      if (this.selectValue === 'name1') {
        this.getRelByCondition();
      } else {
        this.getNotRelByCondition();
      }
    },
    resetBt () {
      this.qualificationName = '';
      this.supplyName = '';
      if (this.selectValue === 'name1') {
        this.getRelByCondition();
      } else {
        this.getNotRelByCondition();
      }
    },
    // 获取已关联的列表
    getRelByCondition () {
      let searchParam = [];
      searchParam.push({
        name: 'qualificationName',
        value: this.qualificationName
      });
      searchParam.push({ name: 'qualificationName_q', value: 'Like' });
      searchParam.push({ name: 'supplyName', value: this.supplyName });
      searchParam.push({ name: 'supplyName_q', value: 'Like' });
      searchParam.push({
        name: 'qualificationCate',
        value: this.qualificationCate
      });
      searchParam.push({ name: 'qualificationCate_q', value: 'EQ' });
      let data = {
        nowPage: this.nowPage1,
        pageShow: this.pageShow,
        searchParam: JSON.stringify(searchParam),
        sortName: '',
        sortType: ''
      };
      ApiRequest(
        this.listData.requestApi.getRelByCondition.url +
          '?relUuid=' +
          this.relUuid,
        this.listData.requestApi.getRelByCondition.type,
        data
      ).then((res) => {
        let rData = res;
        this.data6 = rData.retData.results;
        this.totalNum1 = rData.retData.totalNum;
        this.loading = false;
      });
    },
    // 获取未关联的列表
    getNotRelByCondition () {
      let searchParam = [];
      searchParam.push({
        name: 'qualificationName',
        value: this.qualificationName
      });
      searchParam.push({ name: 'qualificationName_q', value: 'Like' });
      searchParam.push({ name: 'supplyName', value: this.supplyName });
      searchParam.push({ name: 'supplyName_q', value: 'Like' });
      searchParam.push({
        name: 'qualificationCate',
        value: this.qualificationCate
      });
      searchParam.push({ name: 'qualificationCate_q', value: 'EQ' });

      let data = {
        nowPage: this.nowPage1,
        pageShow: this.pageShow,
        searchParam: JSON.stringify(searchParam),
        sortName: '',
        sortType: ''
      };
      ApiRequest(
        this.listData.requestApi.getNotRelByCondition.url +
          '?relUuid=' +
          this.relUuid,
        this.listData.requestApi.getNotRelByCondition.type,
        data
      ).then((res) => {
        let rData = res;
        this.data6 = rData.retData.results;
        this.totalNum1 = rData.retData.totalNum;
        this.loading = false;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.i-table-no-border .ivu-table-header th {
  background: #f8f8f8;
}
</style>